import { Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
import { Page } from 'src/app/models';
import { PageLayoutCommonComponent } from '../page-layout-common.component';

@Component({
  selector: 'zepride-sudoku',
  templateUrl: './sudoku.component.html',
  styleUrls: ['./sudoku.component.less']
})
export class SudokuComponent extends PageLayoutCommonComponent implements OnInit {

  renderTemplate: (templateId: string, dom: HTMLElement) => void;

  _page: Page;
  @ViewChildren('tplContainer') tplContainer: QueryList<ElementRef<HTMLDivElement>>;

  ngOnInit(): void { }

  set page(data: Page) {
    if (!data.pageTmpItems || !data.pageTmpItems.length || !this.tplContainer || !this.tplContainer.length) {
      return;
    }
    this._page = data;
    const templateInfo: { templateId: string; index: string | number }[] = data.pageTmpItems.map(item => {
      return {
        templateId: item.templateId,
        index: item.index
      };
    });
    const containers = this.tplContainer.map(item => item.nativeElement);
    templateInfo.forEach(tpl => {
      const container = containers.find(element => element.dataset.index == tpl.index);
      if (container && this.renderTemplate) {
        this.renderTemplate(tpl.templateId, container);
      }
    });
  }

  get page() {
    return this._page;
  }
}
